<template>
<!-- ref也可以在标签上使用 -->
    <div class="chart-box" ref="chart">

    </div>
</template>
<script>
import * as echarts from 'echarts';

export default {
    data(){
        return{
            chart: null
        }
    },
    methods:{
        init(){
            this.chart = echarts.init(this.$refs.chart);//因为ref在标签上使用的， this.$refs 取到的是DOM元素
        },
        draw(config){
            if(!this.chart) this.init();
            this.chart.setOption(config)
        },
        resize(){
            if(!this.chart) this.init();
            this.chart.resize()
        }
    },
    mounted(){
        this.init();
    },
    beforeDestroy(){
        this.chart && this.chart.dispose()
    }
}
</script>

<style lang="sass" scoped>
.chart-box
    background: #f3f3f3
    border-radius: 8px
</style>
